/* ====================================================== 
   Dropdown Menu
/* ====================================================== */
/* Do not use <a> tag */
.custom-dropdown-trigger {
	display: inline-block;
	cursor: pointer;
	position: relative;

	> input{
		display: none;
	}

	> label {
		cursor: pointer;
		margin: 0;
		padding: 0;
	}

	> ul {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 8px;
		min-width: 170px;
		border-radius: 4px;
		text-align: left;
		display: none;
		opacity: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		@include transition-default();

		&:before {
			content: '';
			position: absolute;
			top: -6px;
			left: 20px;
			width: 0;
			height: 0;
			box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
			border-top: 6px solid #fff;
			border-right: 6px solid #fff;
			border-bottom: 6px solid transparent;
			border-left: 6px solid transparent;
			transform: rotate(-45deg);
		}

		li {
			z-index: 1;
			position: relative;
			background: #fff;
			padding: 0 .75rem;
			color: $sub-text-color;

			a {
				display: block;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				padding: .75rem 0;
				color: inherit;
				font-size: 0.75rem;
				text-decoration: none;
			}


			&:first-child {
				border-radius: 4px 4px 0 0;
			}
			&:last-child {
				border-radius: 0 0 4px 4px;

				a {
					border-bottom: 0;
				}
			}
		}

	}	


	/* wrapping this in media querry to prevent fails while change screen size and checked inputs */
	> :checked ~ ul {
		display: block;
		opacity: 1;
	}
	
	
}





